<template>
	<el-container direction="vertical">
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="curComponent">
				<el-tab-pane
					v-for="item in tagList"
					:key="item.name"
					:label="item.label"
					:name="item.name"
				></el-tab-pane>
			</el-tabs>
		</el-header>
		<keep-alive :max="10">
			<component :is="componentsParmas[curComponent]"/>
		</keep-alive>
	</el-container>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import ToBeReviewed from "./components/ToBeReviewed.vue";
import Approved from "./components/Approved.vue";

const tagList = ref([
	{
		label: "待审核",
    name: "ToBeReviewed"
	},
	{
		label: "已审核",
    name: "Approved"
	},
])
const componentsParmas = shallowRef({
  'ToBeReviewed': ToBeReviewed, 
  'Approved': Approved
})

const curComponent = ref("ToBeReviewed");

</script>

<style></style>
